<template>
	<el-card>
		<!-- 搜索 -->
		<el-form v-show="showSearch" :model="searchData" inline ref="searchFormRef" id="searchForm">
			<el-form-item label="角色名称" prop="name">
				<el-input v-model="searchData.name" placeholder="" clearable></el-input>
			</el-form-item>
			<el-form-item label="角色标识" prop="permission">
				<el-input v-model="searchData.permission" placeholder="" clearable></el-input>
			</el-form-item>
			<el-form-item label="是否使用" prop="isUse">
				<el-select v-model="searchData.isUse" clearable>
					<el-option label="是" value="true"></el-option>
					<el-option label="否" value="false"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" size="mini" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetClick">重置</el-button>
			</el-form-item>
		</el-form>
		
		<el-row id="operate" :gutter="10" style="margin-bottom: 3px;">
			<el-col :span="10">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" v-hasPer="['sys:role:add']" @click="addShowClick">新增</el-button>
			</el-col>
			<right-toolbar :columns="columns" :search="true" :showSearch.sync="showSearch"
				@refresh="searchClick"></right-toolbar>
		</el-row>

		<!-- 表格 -->
		<gz-table ref="tableRef" :searchData="searchData" :columns="columns" api="sysRoleFindAllByPage">
			<el-table-column label="操作" width="200px">
				<template v-slot="scope">
					<el-button type="text" icon="el-icon-edit" @click="editShowClick(scope.row)"
						v-hasPer="['sys:role:edit']">修改</el-button>
					<el-button type="text" icon="el-icon-delete" v-hasPer="['sys:role:delByIds']" @click="deleteClick(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</gz-table>

		<!-- 添加/修改 -->
		<gz-dialog @confirm="confirmClick" width="520px" ref="gzDialogRef" title="添加信息">
			<template>
				<el-form :model="curData" ref="curFormRef" inline label-width="85px" :show-message="false">
					<el-form-item label="角色名称" required prop="name">
						<el-input v-model="curData.name" placeholder="请输入角色名称" style="width: 360px;"></el-input>
					</el-form-item>
					<el-form-item label="角色标识" required prop="permission">
						<el-input v-model="curData.permission" placeholder="请输入角色标识" style="width: 360px;"></el-input>
					</el-form-item>
					<el-form-item label="角色顺序" required prop="sort">
						<el-input v-model="curData.sort" placeholder="请输入角色顺序" type="number" style="width: 360px;"></el-input>
					</el-form-item>
					<el-form-item label="菜单权限">
						<div style="max-height: 250px;overflow-y: auto;">
							<el-tree ref="curMenuTreeRef" :data="menuTree" class="tree-border" :props="props" show-checkbox
								node-key="id" :check-strictly="false" style="width: 360px;">
							</el-tree>
						</div>
					</el-form-item>
					<el-form-item label="是否使用">
						<el-radio-group v-model="curData.isUse" style="width: 360px;">
							<el-radio v-for="dict in dict.type.dictShifou" :key="dict.value" :label="dict.value">
								{{dict.label}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="角色备注" prop="remark">
						<el-input v-model="curData.remark" placeholder="请输入备注" type="textarea"
							:autosize="{ minRows: 2, maxRows: 4 }" style="width: 360px;"></el-input>
					</el-form-item>
				</el-form>
			</template>
		</gz-dialog>
	</el-card>
</template>

<script>
	export default {
		dicts: ["dictShifou","dictDataScope"],
		data() {
			return {
				showSearch: true,
				searchData: {
					isUse: null,
					name: null,
					permission:null,
				},
				curData: {
					
				},
				columns: [{
						label: "角色名称",
						prop: "name",
						isShow: true,
					},
					{
						label: "角色标识",
						prop: "permission",
						isShow: true,
					},
					{
						label: "是否使用",
						prop: "isUse",
						type: "tag",
						isShow: true,
						options: () => {
							return this.dict.type.dictShifou
						}
					},
					{
						label: "备注",
						isShow: true,
						prop: "remark"
					},
					{
						label: "创建时间",
						isShow: true,
						prop: "createTime",
					},
				],
				menuTree: [],
				props: {
					label: "name",
					children: "children",
				},
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.searchClick()

				this.initMenuTree();
			})
		},
		methods: {
			//设置表格高度
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.searchClick()
			},
			//新增
			addShowClick() {
				this.curData = {
					name: null,
					permission: null,
					isUse: "true",
					sort: 0,
					remark: null,
				}
				this.$refs.gzDialogRef.open()
			},
			//修改
			editShowClick(row) {
				this.curData = JSON.parse(JSON.stringify(row))
				this.$refs.gzDialogRef.open()
				this.$nextTick(()=>{
					this.$refs.curMenuTreeRef.setCheckedKeys(row.menuIdList);
				})
			},
			//添加/删除提交
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curFormRef.validate(async (valid) => {
					if (valid) {
						data.menuIdList = this.$refs.curMenuTreeRef.getCheckedKeys()
						if (this.$common.isBlank(data.id)) {
							await this.$api.sysRoleAdd(data)
						} else {
							await this.$api.sysRoleEdit(data);
						}
						this.$refs.gzDialogRef.close()
						this.searchClick()
						this.initMenuTree()
					}
				});
			},
			//删除
			deleteClick(row) {
				this.$common.msgBoxDel(() => {
					this.$api.sysRoleDelByIds(row.id).then(res => {
						this.searchClick();
						this.initMenuTree()
					});
				})
			},
			//获取角色列表
			async getDataMethod() {
				const result = await this.$api.getSysRoleList(this.searchData);
				this.tableInfo = result;
			},
			//添加角色
			addSubmitClick() {
				this.$refs.curData.validate(async (valid) => {
					if (valid) {
						var checkedKeys = this.$refs.addTree.getCheckedKeys();
						var parentKey = this.$refs.addTree.getHalfCheckedKeys();
						this.curData.menuIdList = checkedKeys.concat(parentKey);

						const res = await this.$api.addRole(this.curData);
						this.$notify({
							title: "提示",
							type: "success",
							message: "操作成功",
						});
						this.getDataMethod();
						this.addDialog = false;
					} else {
						Message.warning("请输入必填项");
					}
				});
			},
			//获取树形菜单
			initMenuTree() {
				this.$api.sysMenuFindSelectByTree({isAll:true}).then(data=>{
					this.menuTree = data;
				})
			},
			//状态改变
			async handleSwitchChange(value) {
				await this.$api.editRole(value);
				this.$notify({
					title: "提示",
					type: "success",
					message: "操作成功",
				});
				this.getDataMethod();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.el-form-item {
		padding-bottom: 0px;
		margin-bottom: 9px;
	}
</style>
